<template>
  <div>
    <div :class="isMobile ? 'mobileBgStyle' : 'login_con'">
      <v-canvas v-if="!isMobile"></v-canvas>
      <div :class="isMobile ? 'mobileStyle' : 'login_box'">
        <div class="Vendor">
          <span>商户注册</span>
        </div>
        <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" class="demo-ruleForm">
          <el-form-item prop="phone">
            <el-input prefix-icon="el-icon-mobile-phone" type="text" placeholder="请输入手机号" v-model="ruleForm2.phone" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="phoneCode">
            <el-input placeholder="请输入短信验证码" prefix-icon="el-icon-s-claim" class="input-min" style="width: 160px;" v-model="ruleForm2.phoneCode"></el-input>
            <el-button class="verification" v-if="show" v-on:click="getSmsCode">发送验证码</el-button>
            <span class="register-msg-btn" v-else>&nbsp;&nbsp;{{ count }} 秒</span>
          </el-form-item>
          <el-form-item prop="password">
            <el-input prefix-icon="el-icon-lock" type="password" placeholder="请输入密码" v-model="ruleForm2.password" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="repeatPassword">
            <el-input prefix-icon="el-icon-lock" type="password" placeholder="请再次输入密码" v-model="ruleForm2.repeatPassword" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="weChat"><el-input v-model="ruleForm2.weChat" prefix-icon="el-icon-user" placeholder="请输入微信号" auto-complete="off"></el-input></el-form-item>
          <el-form-item prop="qq"><el-input v-model.number="ruleForm2.qq" prefix-icon="el-icon-user-solid" placeholder="请输入QQ号" auto-complete="off"></el-input></el-form-item>
          <el-form-item prop="inviteCode">
            <el-input v-model="ruleForm2.inviteCode" prefix-icon="el-icon-s-order" placeholder="请输入邀请码" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="code"><slider-code @ztai="verification"></slider-code></el-form-item>

          <el-form-item style="line-height: 20px">
            <el-checkbox fill="#4b95ff" v-model="checked"></el-checkbox>
            <span style="color: #FFFFFF;">我已阅读并接受</span>
            <span class="protocol">用户协议</span>
            <el-dialog title="提示" :visible.sync="dialogVisible2" width="30%">
              <span>这是一段信息</span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible2 = false" style="margin-left: 10px;padding: 10px;background-color: #3A8EE6;">确 定</el-button>
              </span>
            </el-dialog>
          </el-form-item>
          <el-button type="success" @click="enroll" :loading="submitLoading" class="enroll-bot">注 册</el-button>
          <div v-if="!isMobileDevice">
            <span class="login-w">
              已有商户账号？
              <router-link class="abc" to="./login">直接登录</router-link>
            </span>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import sliderCode from '../../components/yzma';
import { apiRegister, apiSMSCode } from '../../request/api';
import vCanvas from '../../components/loginBg.vue';
export default {
  name: 'Enroll',
  components: {
    sliderCode: sliderCode,
    vCanvas
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (this.ruleForm2.repeatPassword !== '') {
        this.$refs.ruleForm2.validateField('repeatPassword');

        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm2.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      checked: true,
      dialogVisible: false,
      dialogVisible2: false,
      ruleForm2: {
        phone: '',
        phoneCode: '',
        password: '',
        repeatPassword: '',
        weChat: '',
        qq: '',
        inviteCode: '',
        code: '1111'
      },
      rules2: {
        inviteCode: {
          required: true,
          message: '邀请码不能为空',
          trigger: 'blur'
        },
        qq: [
          {
            required: true,
            message: '请输入QQ号',
            trigger: 'blur'
          },
          {
            type: 'number',
            message: 'QQ号必须为数字值',
            trigger: 'blur'
          }
        ],
        weChat: [
          {
            required: true,
            message: '请输入微信号',
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          },
          {
            min: 11,
            max: 11,
            message: '手机号在11位',
            trigger: 'blur'
          }
        ],
        phoneCode: [
          {
            required: true,
            message: '请输入手机短信验证码',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 10,
            message: '验证码在3-10字符位之间',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 16,
            message: '密码在6-16字符位之间',
            trigger: 'blur'
          },
          {
            validator: validatePass,
            trigger: 'blur'
          }
        ],
        repeatPassword: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 16,
            message: '密码在6-16字符位之间',
            trigger: 'blur'
          },
          {
            validator: validatePass2,
            trigger: 'blur'
          }
        ]
      },
      verificationCode: '',
      show: true,
      timer: null,
      count: '',
      submitLoading: false,
      isMobileDevice: false
    };
  },
  created() {
  },
  watch: {
    //监听路由跳转
    $route: {
      handler: function(value) {
        if (value.query.inviteCode) {
          this.ruleForm2.inviteCode = value.query.inviteCode;
        }
      },
      immediate: true
    }
  },
  computed:{
    isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      this.isMobileDevice = flag ? true : false;
      return flag ? true : false;
    },
  },
  methods: {
    //验证码

    verification(da) {
      this.verificationCode = da;
    },
    isPhoneNumRight() {
        let reg = /^(14[0-9]|13[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])\d{8}$$/;
        if (!this.ruleForm2.phone) {
            this.$message.error('手机号不能为空')
            return false
        }

        if (!reg.test(this.ruleForm2.phone)) {
             this.$message.error('请输入正确的手机号')
             this.ruleForm2.phone = ''
            return false
        }
        return true
    },
    //短信验证码
    getSmsCode() {
      if (!this.isPhoneNumRight()) {
          return
      }
      console.log(!this.timer);
      this.show = false;
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        if ((this.show = true)) {
          if (this.ruleForm2.phone != '') {
            apiSMSCode({
              phone: this.ruleForm2.phone,
              codeType: 'merchantRegister'
            })
              .then(item => {
                if (item.code == 2 && item.msg != '该用户已经注册') {
                  this.show = true;
                  clearInterval(this.timer);
                  this.timer = null;
                  return this.$message.error(item.msg);
                } else if (item.code == 2 && item.msg == '该用户已经注册') {
                  this.show = true;
                  clearInterval(this.timer);
                  this.timer = null;
                  return this.$message.error(item.msg);
                }
                this.$message.success(item.msg);
              })
              .catch(item => {
                this.$message.error(item.msg);
              });
          } else {
            this.$message.error('手机号码不能为空');
          }
        }
        this.timing(TIME_COUNT);
      }
    },
    timing(TIME_COUNT) {
      this.show = false;
      this.timer = setInterval(() => {
        if (this.count > 0 && this.count <= TIME_COUNT) {
          this.count--;
        } else {
          this.show = true;
          clearInterval(this.timer);
          this.timer = null;
        }
      }, 1000);
    },
    enroll() {
      if (this.checked != true) return this.$message.error('请同意用户协议');
      this.$refs.ruleForm2.validate(async valid => {
        // 如果这个值为false 直接return不发送请求

        if (!valid) return;

        if (this.verificationCode != true) {
          this.$message.error('验证失败!!');
          return;
        }
        this.submitLoading = true;
        apiRegister(this.ruleForm2)
          .then(res => {
            if (res.code == 1) {
              this.submitLoading = false;
              this.$message.success('注册成功');
              this.dialogVisible = true;
              if (this.isMobileDevice) {
                setTimeout(() => {
                  this.$message.success('注册成功,请到pc端上登录');
                }, 300);
              } else {
                this.$router.push('/login');
              }
            } else {
              this.$message.error(res.msg);
              this.dialogVisible = true;
              this.submitLoading = false;
            }
          })
          .catch(item => {});
      });
    },
    rouerlinkLogin() {
      this.dialogVisible = false;
      this.$router.push('/login');
    },
    enrollqko() {
      this.dialogVisible = false;
      this.$refs.ruleForm2.resetFields();
    }
  }
};
</script>
<style lang="less" scoped>
.login_con {
  background-color: #ffffff;
  height: 100%;
  width: 100%;
  position: absolute;
}
.mobileBgStyle {
  background-image: linear-gradient(to bottom, #163284, #b76969);
  background-color: #1A1A1A;
  height: 100%;
  width: 100%;
  position: absolute;
}
.mobileStyle{
  width: 80%;
  padding: 0 32px;
  margin: 0 auto;
  box-shadow: 0 0 10px #888;
  height: 100vh;
  overflow-y: scroll;
}
.login_box {
  background-color: hsla(228,52%,53%,0.50);
  box-shadow: 10px 10px 31px -5px rgba(0,0,0,0.7);
  -webkit-box-shadow: 10px 10px 31px -5px rgba(0,0,0,0.7);
  -moz-box-shadow: 10px 10px 31px -5px rgba(0,0,0,0.7);
  width: 336px;
  height: 720px;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0 auto;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 32px;
  z-index: 9999;
}

.Vendor {
  margin: 14px 0 20px;
  color: #FFFFFF;
  text-align: center;
  font-size: 24px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 14px;
}

.enroll-bot {
  display: block;
  width: 100%;
  margin: 20px 0;
  background: @themeColor;
  color: #fff;
  border: 1px solid @themeColor;
  padding: 15px;
}

.Vendor-u {
  display: inline-block;
  margin-left: 10px;
  color: #bfbfbf;
  font-size: 14px;
}

.input-min {
  width: 60%;
}

.verification {
  border-radius: 4px;
  text-align: center;
  background: @themeColor;
  display: inline-block;
  width: 110px;
  margin-left: 16px;
  height: 40px;
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  cursor: pointer;
  border: 1px solid @themeColor;

  img {
    transform: scale(1);
    transition: all 0.5s ease;
  }
}

.password-w {
  float: right;
  color: rgb(153, 153, 153);
  text-decoration: none;
}

.password-w:hover {
  border-bottom: 1px solid #ccc;
}

.register {
  display: block;
  color: #999;
  margin: 20px 0;
  text-align: center;
  font-size: 18px;
}

.protocol {
  color: @themeColor;
  cursor: pointer;
}

.login-w {
  display: inline-block;
  width: 100%;
  text-align: right;
  color: #bfbfbf;

  a {
    color: #f68585;
  }
}
</style>
